<template>
  <div class="header">
    <div class="bread">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/homr">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-for="item in breadcrumbs" :to="item.path">
          {{ item.meta.title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="info" v-if="userInfo">
      <span>欢迎{{ userInfo.account }}登录 ，退出登录</span>
      <el-avatar :size="30" :src="serverUrl + userInfo.imgUrl" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { accountInfo } from '@/api/account'
import { serverUrl } from '@/utils/common';
import { useRoute } from 'vue-router';

const user = JSON.parse(sessionStorage.getItem('user'))
const userInfo = ref()

const getAccountInfo = async () => {
  let res = await accountInfo({ id: user.id })
  userInfo.value = res.accountInfo;

}
getAccountInfo()



</script>

<style scoped>
.header {
  width: 100%;
  height: 50px;
  background-color: #fff;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
}

.item1 {
  display: flex;
}

img {
  width: 50px;
  height: 50px;
  border-radius: 50%;

}
</style>